<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xiaomi MIX4 立即购买-小米商城</title>
    <link rel="icon" href="../../imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/common/header.css">
    <link rel="stylesheet" href="../../css/cart/add_cart.css">
    <link rel="stylesheet" href="../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../css/common/page_bottom.css">
    <link rel="icon" href="../../imgs/favicon.ico" type="image/x-icon" />

</head>

<body>
    <div id="app">

        <!-- 定义头部 -->
        <div class="header">
            <div class="site-topbar">
                <div class="container">
                    <div class="topbar-nav">
                        <a href="#">小米商城</a>
                        <span class="sep">|</span>
                        <a href="#">MIUI</a>
                        <span class="sep">|</span>
                        <a href="#">loT</a>
                        <span class="sep">|</span>
                        <a href="#">云服务</a>
                        <span class="sep">|</span>
                        <a href="#">天星数科</a>
                        <span class="sep">|</span>
                        <a href="#">有品</a>
                        <span class="sep">|</span>
                        <a href="#">小爱开放平台</a>
                        <span class="sep">|</span>
                        <a href="#">企业团购</a>
                        <span class="sep">|</span>
                        <a href="#">资质证照</a>
                        <span class="sep">|</span>
                        <a href="#">协议规则</a>
                        <span class="sep">|</span>
                        <a href="#">下载app</a>
                        <span class="sep">|</span>
                        <a href="#">智能生活</a>
                        <span class="sep">|</span>
                        <a href="#">Select Location</a>
                        <span class="sep">|</span>
                    </div>
                    <div class="topbar-cart">
                        <a href="../../view/cart/add_cart.html"><em class="iconfont icon-gouwuchekong"> </em>购物车<span class="cart-num">(0)</span></a>
                        <div class="cart-menu">
                            <div class="menu-content">
                                <div class="loading">
                                    <div class="loader"></div>
                                    <ul class="cart-list hide"></ul>
                                    <div class="cart-total hide"></div>
                                    <div class="msg-empty hide">购物车中还没有商品,赶紧选购吧!</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topbar-info">
                        <a href="../login/login.html">登录</a>
                        <span class="sep">|</span>
                        <a href="../register/register.html">注册</a>
                        <span class="sep">|</span>
                        <span class="message">
                            <a href="#">消息通知</a>
                        </span>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="site-header">
                <div class="container">
                    <!-- logo -->
                    <div class="header-log">
                        <a href="#">
                            <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png">
                        </a>
                    </div>
                    <!-- 中间导航部分 -->
                    <div class="header-nav">
                        <ul class="nav-list">
                            <li class="nav-category"><a href="" class="link-category">全部商品分类</a>
                            <div class="site-category">
                                <ul class="site-category-list">
                                <li class="category-item"><a href="">手机<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">电视<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">笔记本 平板<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">家电<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">出行 穿戴<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">智能 路由器<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">电源 配件<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">健康 儿童<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">耳机 音箱<em class="iconfont">&#xe625;</em></a></li>
                                <li class="category-item"><a href="">生活 箱包<em class="iconfont">&#xe625;</em></a></li>
                            </ul>
                            </div>
                            </li>
                            <li class="nav-item"><a href="">小米手机</a></li>
                            <li class="nav-item"><a href="">Redmi&nbsp;红米</a></li>
                            <li class="nav-item"><a href="">电视</a></li>
                            <li class="nav-item"><a href="">笔记本</a></li>
                            <li class="nav-item"><a href="">平板</a></a></li>
                            <li class="nav-item"><a href="">家电</a></li>
                            <li class="nav-item"><a href="">路由器</a></li>
                            <li class="nav-item"><a href="">智能硬件</a></li>
                            <li class="nav-item"><a href="">服务</a></li>
                            <li class="nav-item"><a href="">社区</a></li>
                        </ul>
                    </div>
                    <!-- 搜索区域 - 弹性盒子 -->
                    <div class="header-search">
                        <div class="search">
                            <div class="item1">
                                <input type="text" placeholder="小米11">
                            </div>
                            <div class="item2">
                                <input type="button" class="iconfont" style="font-size: 32px;" value="&#xeafe;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 定义头部end -->
        <!-- start 手机概述参数导航栏 -->
        <div class="cart_nav">
            <div class="cart_nav_container">
                <h2>Xiaomi MIX 4 </h2>
                <div class="left">
                    <span>|</span>
                    <a href="#">MIX FOLD 小米折叠屏手机</a>
                </div>
                <div class="right">
                    <a href="#">概述页</a>
                    <span>|</span>
                    <a href="../product/parameter.html">参数页</a>
                    <span>|</span>
                    <a href="#">F码通道</a>
                    <span>|</span>
                    <a href="#">咨询客服</a>
                    <span>|</span>
                    <a href="../comment/comment.html">用户评价</a>
                </div>
            </div>
        </div>
        <!-- end 手机概述,参数导航栏 -->
        <!--  start 详情 -商品介绍  -->
    </div>
    <div id="cart_detail">
        <div class="container">
            <div class="detail_left">
                <img src="../../imgs/MIX4.jpg">
            </div>
            <div class="detail_right">
                <h2>Xiaomi MIX 4</h2>
                <p class="cc">
                    <font color="#ff4a00">「购机最高享24期分期免息；+949元得Micare保障服务」</font>
                    CUP全面屏 | 真彩原色 + 120Hz | 一体化轻量陶瓷机身 | 高通骁龙™888+ | WiFi 6 增强版 | 石墨烯「冰封」散热系统4500mAh 大电量 | 常温 120W 快充 |
                    50W 无线快充 | 1 亿像素电影相机
                </p>
                <p class="ziying"
                    title="企业名称：小米通讯技术有限公司
                企业执照注册号：91110108558521630L
                企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
                企业电话：400-100-5678
                营业期限：2010年08月25日 至 2040年08月24日
                经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">
                    小米自营
                </p>
                <p class="price-info">
                    <span>5799&nbsp;元</span>
                </p>
                <div class="line"></div>
                <div class="zeng">
                    <span>赠完即止</span>
                    <span>Xiaomi MIX 4买赠价值69元单动圈耳机</span>
                </div>
                <div class="address-box">
                    <div class="product-address">
                        <i class="iconfont">&#xe606;</i>
                        <div class="address-con">
                            <div class="address-info">
                                <span>北京</span>
                                <span>北京市</span>
                                <span>海淀区</span>
                                <span>清河街道</span>
                                <a href="#" class="edit">修改</a>
                            </div>
                            
                        </div>
                        <div class="info">
                            <div class="desc">
                                <span>有现货</span>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 选择版本 -->
                <div class="buy-option">
                    <div class="buy-child">
                        <div class="buy-box">
                            <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;">选择版本</div>
                            <ul>
                                <li><a>12GB+256GB</a></li>
                                <li class="box2"><a>8GB+128GB</a></li>
                                <li><a>8GB+256GB</a></li>
                                <li class="box2"><a>12GB+512GB</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="buy-child">
                        <div class="buy-box">
                            <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;">选择颜色</div>
                            <ul>
                                <li><a>陶瓷黑</a></li>
                                <li class="box2"><a>影青灰</a></li>
                                <li><a>陶瓷白</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end 选择版本 -->
                <div class="selected-list">
                    <ul>
                        <li>Xiaomi MIX 4 12GB+256GB 陶瓷黑<span>5799元</span></li>
                    </ul>
                    <div class="total-price">总计:5799元</div>
                </div>
                <div class="btn-box">
                    <div class="sale-btn">
                        <a href="../cart/add_success_Tip.html" class="btn-primary">加入购物车</a>
                    </div>
                    <div class="favorite-btn">
                        <a href="#" class="btn-like"><i class="iconfont ">&#xe626; </i>喜欢</a>
                    </div>
                </div>
                <div class="after-sale-info">
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米自营</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米发货</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>7天无理由退货</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>运费说明</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>企业信息</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>价格保护</em></a>
                    </span>
                </div>
            </div>
        </div>
    </div>
    </div>


    <!-- 底部： 价格说明 -->
    <div class="prices-explanation">
        <div class="explanation-name">
            <h3>价格说明</h3>
        </div>
        <div class="explanation-content">
            <img src="../../imgs/price-explanation.jpeg">
        </div>
    </div>


    <div class="page-bottom">
        <ul class="address clear container">
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe607;</i>
                        <span>预约维修服务</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe603;</i>
                        <span>七天无理由退货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe60f;</i>
                        <span>15天免费换货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe778;</i>
                        <span>满69包邮</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe608;</i>
                        <span>520余家售后网点</span>
                    </a>

                </div>
            </li>
        </ul>
        <div class="bottom-message clear container">
            <ul class="bottom-list">
                <li>
                    <dl>
                        <dd>帮助中心</dd>
                        <dt><a href="">账户管理</a></dt>
                        <dt><a href="">购物指南</a></dt>
                        <dt><a href="">订单操作</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>服务支持</dd>
                        <dt><a href="">售后政策</a></dt>
                        <dt><a href="">自动服务</a></dt>
                        <dt><a href="">相关下载</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>线下门店</dd>
                        <dt><a href="">小米之家</a></dt>
                        <dt><a href="">服务网点</a></dt>
                        <dt><a href="">授权体验店</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关于小米</dd>
                        <dt><a href="">了解小米</a></dt>
                        <dt><a href="">加入小米</a></dt>
                        <dt><a href="">投资者关系</a></dt>
                        <dt><a href="">企业社会责任</a></dt>
                        <dt><a href="">廉洁举报</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关注我们</dd>
                        <dt><a href="">新浪微博</a></dt>
                        <dt><a href="">官方微信</a></dt>
                        <dt><a href="">联系我们</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>特色服务</dd>
                        <dt><a href="">F码通道</a></dt>
                        <dt><a href="">礼物码</a></dt>
                        <dt><a href="">防伪查询</a></dt>
                    </dl>
                </li>
            </ul>
            <div class="contact">
                <h2>400-100-5678</h2>
                <p>8:00-18:00（仅收市话费）</p>
                <a href="">
                    <div class="customer">
                        <i class="iconfont">&#xe605;</i>
                        <span>人工客服</span>
                    </div>
                </a>
                <div class="wbwx">
                    <span>关注小米：</span>
                    <a href=""><i class="iconfont">&#xe613;</i></a>
                    <a href=""><i class="iconfont">&#xe604;</i></a>
                </div>
            </div>
        </div>
    </div>
    

</body>

</html>